<template>
  <div class="fee-section">
    <div class="sys-fees fee-area">
      <div class="fee-area-title flex"> <div class="fee-area-title-border"></div>系统配置</div>
      <div class="fee-area-content">
        <div class="sys-fee-list">
          <page-form-row>
            <page-form-item label="费用名称" v-for="(item, index) in option.sysList" :key="index">
              <template #label="{ label }">
                {{ label }}
                <span class="custom-tag">{{ item.payTypeStr }}</span>
              </template>
              <i-input :modelValue="item.feeName" disabled />
            </page-form-item>
          </page-form-row>
        </div>
      </div>
    </div>
    <div class="custom-fees fee-area" v-if="option.customList">
      <div class="fee-area-title flex"> <div class="fee-area-title-border"></div> 自定义配置 </div>
      <div class="fee-area-content">
        <div class="custom-fee-list" v-if="option && option.customList.length > 0">
          <!-- 增值服务费 -->
          <template v-if="feeType == 'addServiceFee'">
            <div class="add-service-fee-list">
              <page-form-row :gutter="{ xs: 10, sm: 20, md: 40, xl: 60 }" v-for="(item, index) in option.customList" :key="index">
                <page-form-item
                  :style="getCustomFeeStyle(index, option.customList)"
                  label="费用名称"
                  :field="`tenantPriceFee.${feeType}.customList.${index}.feeName`"
                  required
                  :rules="{ required: true, message: '请输入费用名称' }"
                >
                  <i-input v-model="item.feeName" :max-length="20" />
                </page-form-item>
                <page-form-item :style="getCustomFeeStyle(index, option.customList)" label="收付款类型">
                  <a-select placeholder="请选择" v-model="item.payType">
                    <a-option
                      v-for="dictItem in getOptionPaytypeMap()"
                      :key="dictItem.value"
                      :value="dictItem.value"
                      :label="dictItem.label"
                    />
                  </a-select>
                </page-form-item>
                <page-form-item class="page-form-item-unit" label="单位" style="position: relative; margin-bottom: 0">
                  <template #label>
                    <div style="height: 22px"></div>
                  </template>
                  <div style="width: 80px; margin-right: 10px">
                    <page-form-item style="margin-bottom: 0">
                      <a-select placeholder="请选择" v-model="item.feeUnit">
                        <a-option
                          v-for="dictItem in dict[templateSort == 1 ? 'feeUnitShortMap' : 'feeUnitLongMap']"
                          :key="dictItem.value"
                          :value="dictItem.value"
                          :label="dictItem.label"
                        />
                      </a-select>
                    </page-form-item>
                  </div>
                  <div style="width: calc(100% - 90px)">
                    <page-form-item
                      style="margin-bottom: 0"
                      required
                      :field="`tenantPriceFee.${feeType}.customList.${index}.feeAmount`"
                      :rules="{ required: true, message: '请输入金额' }"
                    >
                      <i-input-number v-model="item.feeAmount" />
                    </page-form-item>
                  </div>

                  <div class="btn-list">
                    <a-popconfirm content="请确认，是否删除此费项信息？" ok-text="确认" cancel-text="关闭" @ok="delCustomFeeFn(index)">
                      <a-button type="text" class="btn-item del"
                        ><a-space size="mini"><icon-minus-circle />删除</a-space></a-button
                      >
                    </a-popconfirm>
                    <a-button type="text" class="btn-item new" @click="addCustomFeeFn" v-if="index == option.customList.length - 1"
                      ><a-space size="mini"><icon-plus-circle />新增</a-space></a-button
                    >
                  </div>
                </page-form-item>
              </page-form-row>
            </div>
          </template>
          <template v-else>
            <page-form-row v-for="(item, index) in option.customList" :key="index">
              <page-form-item
                :style="getCustomFeeStyle(index, option.customList)"
                label="费用名称"
                :field="`tenantPriceFee.${feeType}.customList.${index}.feeName`"
                required
                :rules="{ required: true, validator: feeValidator }"
              >
                <i-input v-model="item.feeName" :max-length="20" />
              </page-form-item>
              <page-form-item style="margin-bottom: 0; position: relative" label="收付款类型">
                <a-select placeholder="请选择" v-model="item.payType" :disabled="option.disabled">
                  <a-option
                    v-for="dictItem in getOptionPaytypeMap()"
                    :key="dictItem.value"
                    :value="dictItem.value"
                    :label="dictItem.label"
                  />
                </a-select>
                <div class="btn-list">
                  <a-popconfirm content="请确认，是否删除此费项信息？" ok-text="确认" cancel-text="关闭" @ok="delCustomFeeFn(index)">
                    <a-button type="text" class="btn-item del"
                      ><a-space size="mini"><icon-minus-circle />删除</a-space></a-button
                    >
                  </a-popconfirm>
                  <a-button type="text" class="btn-item new" @click="addCustomFeeFn" v-if="showAddBtnFn(index, option.customList)">
                    <a-space size="mini"><icon-plus-circle />新增</a-space>
                  </a-button>
                </div>
              </page-form-item>
            </page-form-row>
          </template>
        </div>
        <div class="empty-custom-fee flex" v-if="option.customList.length == 0">
          <div class="empty-custom-fee-content">
            <a-empty description="暂无自定义配置" />
            <a-button type="primary" @click="addCustomFeeFn">
              <template #icon>
                <icon-plus />
              </template>
              新增自定义配置
            </a-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup name="CommonPriceFeeSection">
  import { inject } from 'vue'
  const props = defineProps({
    option: Object,
    // 费用类型： addServiceFee | preferentialFee | otherFee | extraFee | depositFee
    feeType: String,
    dict: Object,
    // 长租、短租类型 1 短租 2 长租
    templateSort: String,
  })
  const dict = inject('dict')
  // 新增自定义费项
  const addCustomFeeFn = () => {
    // 自定义费项列表
    let option = props.option
    let customList = option.customList
    // 费用类型
    let feeType = props.feeType
    // payTypeMap：收付款类型  0：收款类型  1：付款类型  2：收款/付款类型
    let defaultPayType = {
      addServiceFee: 0,
      preferentialFee: 1,
      otherFee: 0,
      extraFee: 0,
      depositFee: 0,
    }
    // 费用单位 默认 次
    let defaultFeeUnit = 0
    let feeOption = {
      feeType: option.feeType,
      // 新增不传入 feeId
      feeId: undefined,
      feeName: '',
      payType: defaultPayType[feeType],
    }
    // 增值服务费 需要录入 单位和 金额
    if (feeType == 'addServiceFee') {
      Object.assign(feeOption, {
        feeUnit: defaultFeeUnit,
        feeAmount: '',
      })
    }
    if (feeType == 'refuseFee') {
      Object.assign(feeOption, {
        payType: 1,
      })
    }
    customList.push(feeOption)
  }
  // 收付款类型
  const getOptionPaytypeMap = () => {
    let feeType = props.option.feeType
    // 优惠费用仅有付款类型，其他包含 收款类型、付款类型、收款/付款类型
    if (feeType == 2) {
      return props.dict.payTypeMap.filter((item) => {
        return item.label == '付款类型'
      })
    } else if (feeType == 6) {
      return props.dict.payTypeMap.filter((item) => {
        return item.label == '收款类型'
      })
    } else {
      return props.dict.payTypeMap
    }
  }
  // 删除自定义费项
  const delCustomFeeFn = (index) => {
    // 自定义费项列表
    let option = props.option
    option.customList.splice(index, 1)
  }
  const getCustomFeeStyle = (index, list) => {
    return index == list.length - 1 ? { 'margin-bottom': 0 } : undefined
  }
  // 是否显示添加配置按钮
  const showAddBtnFn = (index, list) => {
    let isLast = index == list.length - 1
    let option = props.option
    if (option.customMax) {
      return isLast && list.length < option.customMax
    } else {
      return isLast
    }
  }
  const feeValidator = (value, callback) => {
    if (value) {
      if (props.feeType == 'refuseFee') {
        // 额外费用退款禁止输入符号
        const regRule = /[`~^!@#$€£₤%^&*()_\-+=<>?:"{}|.\/;'\\[\]·~！……@#￥¥%*（）\-+={}|《》？：“”【】‘']/im
        regRule.test(value) ? callback('不允许输入符号') : callback()
      } else {
        callback()
      }
    } else {
      callback('请输入费用名称')
    }
  }
</script>
<style lang="less" scoped>
  .fee-area-title {
    height: 16px;
    line-height: 16px;
    .fee-area-title-border {
      width: 3px;
      height: 16px;
      background: rgb(var(--primary-6));
      display: inline-block;
      margin-right: 8px;
    }
  }
  .fee-area-content {
    padding-top: 16px;
    .custom-tag {
      height: 20px;
      line-height: 20px;
      background: #fff7e8;
      border-radius: 2px;
      font-size: 12px;
      color: #ff7d00;
      padding: 0 8px;
      display: inline-block;
    }
  }

  .empty-custom-fee {
    margin: 4px 0 65px;
    justify-content: center;
    :deep(.arco-empty) {
      .arco-empty-description {
        color: #d8d8d8;
        font-size: 12px;
      }
      .arco-icon {
        color: #d8d8d8;
      }
    }
  }
  .add-service-fee-list {
    padding-right: 200px;
  }
  .btn-list {
    position: absolute;
    right: -180px;
    width: 180px;
    padding-left: 16px;
    .btn-item {
      font-size: 14px;
      height: 32px;
      line-height: 32px;
      padding: 0 12px;
      icon {
        margin-right: 8px;
      }
      &.del {
        color: #ea0000;
      }
      &.new {
        color: #165dff;
      }
    }
  }
  .page-form-item-unit {
    :deep(.arco-form-item-content-flex) {
      align-items: unset;
    }
  }
</style>
